<!-- 编辑访问路径 -->
<template>
  <div>
    <a-modal 
      v-model="visible" 
      @ok='handleSubmit'
      @cancel="handleCancel"
      :maskClosable="false"
      :width="450"
      v-dragModal
    >
      <template slot="title">
        <span>{{$t('Edit')+$t('Access-path')}}</span>
      </template>
      <a-form :form='form'>
        <!-- 名称 -->
        <a-form-item :label="$t('Name2')" v-bind='formLayout'>
          <a-input
            disabled
            v-decorator="['target_name',{
              rules:[
                // {required:true,message:$t('Enter')+$t('Name2')},
                // {pattern:/^iqn\.[0-9]{4}\-(0[1-9]|1[0-2])(\.[\-0-9a-zA-Z]+)+(:[\-0-9a-zA-Z]+)*$/,message: $t('Iqn-reg')}
              ],
              initialValue: targetData.name
              // ([\.:\-0-9a-zA-Z]+)
            }]"
            :placeholder="$t('Enter')+$t('Name2')"
          />
        </a-form-item>
        <!-- 网关 -->
        <a-form-item :label="$t('Gateway')" v-bind="formLayout">
          <a-select 
            v-decorator="['gateway',{
              rules:[
                {required:true,message:$t('Choose')+$t('Gateway')},
                {validator: validatorGateway}
            ],
              initialValue: targetData.hostname
            }]"
            mode="multiple"
            :placeholder="$t('Choose')+$t('Gateway')"
          >
            <a-select-option v-for="item in gatewayInfo" :value='item.hostname' :key="item.hostname" :disabled="item.is_chose">
              {{item.hostname+":"+item.public_ip}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="submit-btn" type="primary" @click="handleSubmit" :loading="submitLoading">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "EditTarget",
  props: {
    modalVisible: {
      type: Boolean,
      require: true
    },
    gatewayInfo: {
      type: Array,
      require: true,
      default: () => { return [] }
    },
    targetData: {
      type: Object,
      require: true,
      default: () => { return {} }
    }
  },

  watch: {
    modalVisible(newValue) {
      this.visible = newValue;
    }
  },

  data() {
    return {
      visible: false,
      form: this.$form.createForm(this),
      formLayout: {
        labelCol: {span:7},
        wrapperCol: {span:16}
      },
      submitLoading: false,
    }
  },
  methods: {
    // 校验网关(至少选择两个网关)
    validatorGateway(rule, value, callback) {
      if (value && value.length < 2) {
        callback(this.$t('Please-se-two-gateway'));
      } else {
        callback();
      }
    },

    // 提交编辑访问路径
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err){
          this.submitLoading = true;
          let gateway = [];
          for(let i=0, length=value.gateway.length; i<length; i++) {
            for(let j=0,length2=this.gatewayInfo.length; j<length2; j++) {
              if(value.gateway[i] === this.gatewayInfo[j].hostname) {
                gateway.push({
                  hostname: this.gatewayInfo[j].hostname,
                  ipaddr: this.gatewayInfo[j].public_ip
                });
                break;
              }
            }
          }
          const params = {
            target: this.targetData.name,
            gateway
          };
          try{
            const res = await this.$api.iscsi.editTargetRequest(params);
            if(res && res.data) {
              this.model(res.data.id) //返回模板
              this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
              if(res.data.flag === 0) {
                this.$emit('updateData');
              }
            }
          } catch{
            this.handleCancel();
          }
          this.handleCancel();
        }
      })
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperationModal', 'close-edit');
      this.submitLoading = false;
      this.form.resetFields();
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>